import React from "react"
import { SearchBar, WhiteSpace, Card } from 'antd-mobile';

// const Item = List.Item;

class SearchBarExample extends React.Component {

    render() {
        return (<div>
            <style jsx="true">{`
        body,html{
            font-size:62.5%;
        }
        .car-content {
            display: inline-block;
            width: 80%;
            text-align: left;
            color: #888;
            font-size: 1.4rem;
            padding-left: 1rem;
            box-sizing: border-box;
        }
        .car-content>p{
            width:100%;
            overflow: hidden;
            margin: 0.5rem 0;
        }
        .car-left{
            font-size: 0;
            float: left;
            width: 20%;
            max-width: 5rem;
            -webkit-box-flex: 0;
            -webkit-flex: none;
            -ms-flex: none;
            flex: none;
        }
        .car-left>img{
            width: 100%;
            height: 100%;
            border: 1px solid #f1f1f1;
            border-radius: 0.2rem;
        }
        .car-right{
        // float: left;
        width: 100%;
        }
        html:not([data-scale]) .am-card:not(.am-card-full)::before{
            border:none;
        }
        .car-center{
            margin: 0 8px;
            height: auto;
            background: white;
            padding: 10px 0;
            overflow: hidden;
        }
        .am-card-header-extra {
            font-size: 1.4rem;
            margin-right: 1rem;
        }
        .am-card-body {
            min-height: 20px;
        }
        .serialNumber-icon,.address-icon{
            width: 1.2rem;
            float: left;
            margin-right: 0.5rem;
        }
        .am-card-header{
            position: relative;
            line-height: 4rem;
            padding-left: 1rem;
            color: #353535;
            height: 4rem;
            font-size: 1.3rem;
            font-weight: normal;
            background: url(images/arrow.png) no-repeat;
            background-size: 1rem 1rem;
            background-position: 98% center;
        }
        .sys-gape {
            display: inline-block;
            width: 8.6rem;
            height: 1.8rem;
            font-size: 1rem;
            color: #00abff;
            border: 0.1rem solid #00abff;
            line-height: 1.8rem;
            text-align: center;
            border-radius: 1rem;
            margin-right: 1rem;
            float: left;
        }
        .water-battery {
            font-size: 1.1rem;
            float: left;
            line-height: 1.8rem;
            color: #000;
        }
        `}</style>
            <SearchBar placeholder="请输入设备名或设备ID进行搜索" maxLength={8} />
            <WhiteSpace />
            <div className="car-center">
                <Card className="car-right">
                    <Card.Header
                        title="消防水池"
                        extra={<span>监测标准</span>}
                    />
                    <Card.Body >
                        <div className="car-left">
                            <img src="images/user.png" alt="" />
                        </div>
                        <div className="car-content">
                            <p><img className="serialNumber-icon" src="images/code.png" alt="" /><span>(0755)-000149-B002A08-0001</span></p>
                            <p><img className="serialNumber-icon" src="images/position.png" alt="" /><span>平安大厦B2地下2层东南方向</span></p>
                            <p><span className="sys-gape">系统端1.5MPa</span><span className="water-battery">传感器电量</span></p>
                        </div>
                    </Card.Body>
                    {/* <Card.Footer content="深圳市南山区消检通大厦1105西走道" /> */}
                </Card>
            </div>


        </div>);
    }

}
export default SearchBarExample
